<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="button" value="切换显示状态" @click="changeisshow">
			<input type="button" value="增大年龄" @click="addage">
			<input type="button" value="减小年龄" @click="minusage">
			<h3>第二张图片大于18可以看，目前年纪：{{age}}</h3>
			<br />
			<img v-show="isshow" src="img/公路.jpg" alt="这就是我" style="width: 600px;height: 400px">
			<img v-show="age>=18" src="img/河流.jpg" alt="年满十八我要入党" style="width: 600px;height: 400px; margin-left: 5px;"> 
		</div>
		<script src="https://unpkg.com/vue@next"></script>
		<script>
			const Counter = {
				data() {
					return {
						isshow: false,
						age: 15,						
					}
				},
				methods: {
					changeisshow: function() {
						this.isshow = !this.isshow;
					},
					addage: function() {
						this.age++;
					},
					minusage: function() {
						this.age--;
					},
				},
			}
			Vue.createApp(Counter).mount('#app')
		</script>
	</body>
</html>
